<template>
    <div>
        <h3>优惠券列表</h3>
        <td>
            <input type="button" value="添加" @click="adddiscount" class="btn btn-primary">
        </td>
        <hr>
        优惠券标题
        <input type="text" v-model="can.name">
        时间
        <input type="date" v-model="can.BeginTime">-<input type="date" v-model="can.EndTime">

        <input type="button" value="查询" @click="GetDiscount" class="btn btn-primary">

        <table class="table table-bordered">
            <tbody>

                <tr>
                    <td>
                        <input type="checkbox" v-model="checkbox" @click="headall">
                    </td>
                    <td>优惠券类型</td>
                    <td>优惠券标题</td>
                    <td>副标题</td>
                    <td>图片</td>
                    <td>库存</td>
                    <td>每人限领数量</td>
                    <td>使用条件</td>
                    <td>减免金额</td>
                    <td>折扣价</td>
                    <td>开始时间</td>
                    <td>结束时间</td>
                    <td>适用业务</td>
                    <td>使用须知</td>
                    <td>门店名称</td>
                    <td>服务电话</td>
                    <td>优惠券颜色</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="bodyall">
                    </td>
                    <td>{{ item.DiscountT }}</td>
                    <td>{{ item.Title }}</td>
                    <td>{{ item.subTitle }}</td>
                    <td>
                        <img :src="item.Photo" width="150" height="100">
                    </td>
                    <td>{{ item.Count }}</td>
                    <td>{{ item.Number }}</td>
                    <td>{{ item.AmountMoney }}</td>
                    <td>{{ item.SubMoney }}</td>
                    <td>{{ item.ZheKou }}</td>
                    <td>{{ item.BeginTime }}</td>
                    <td>{{ item.EndTime }}</td>
                    <td>{{ item.UseService }}</td>
                    <td>{{ item.UseDecs }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.Phone }}</td>
                    <td>{{ item.Color }}</td>
                    
                    <td>
                        <input type="button" value="删除" @click="del(item.Id)" class="btn btn-danger">
                        <input type="button" value="修改" @click="upd(item.Id)" class="btn btn-primary">
                    </td>
                </tr>
            </tbody>
        </table>


    </div>

    <div>
        <span>共<B>{{ data.totalCount }}</B>条</span>
        <span>共<B>{{ data.totalPage }}</B>页</span>
        <span>当前第<b>{{ can.pageIndex }}/{{ data.totalPage }}</b>页</span>

        <select v-model="can.PageSize" @change="show">
            <option :value="item" v-for="item in yes" :key="item">每页{{ item }}条</option>
        </select>



        <input type="button" value="首页" @click="gopage(1)" class="btn btn-">
        <input type="button" value="上一页" @click="gopage(can.pageIndex - 1)" class="btn btn-">

        <span v-for="item in data.totalPage" @click="gopage(item)">{{ item }}</span>

        <input type="button" value="下一页" @click="gopage(can.pageIndex + 1)" class="btn btn-">
        <input type="button" value="尾页" @click="gopage(data.totalPage)" class="btn btn-">


    </div>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted, useSlots } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
import axios from 'axios';
const route = useRoute();
const router = useRouter();
//跳转添加页面
const adddiscount = () => {
    router.push('/disModelAdd')
}
let checkbox = ref();
let ids = ref([]);

let data: any = reactive({
    list: [],
    totalCount: "",
    totalPage: ""
})
let can: any = reactive({
    pageIndex: 1,
    PageSize: 2,
    name: "",
    BeginTime: "",
    EndTime: ""
})

//页容量
let yes = ref(
    [2, 4, 6, 8]
)


onMounted(() => {
    GetDiscount();
})
//修改
const upd=(id:any)=>{
    router.push({
        path:'discountupdate',
        query:{
            id:id
        }
    })
}


//全选全不选
const headall = () => {
    checkbox.value = !checkbox.value;
    if (checkbox.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    }
    else {
        ids.value = [];
    }
}

//反选 
const bodyall = () => {
    if (ids.value.length == data.list.length) {
        checkbox.value = true;
    }
    else{
        checkbox.value = false;
    }

}

//删除
const del = (id: any) => {
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/Disc/DelDisc",
            params: {
                ids: id
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('删除成功');
                    GetDiscount();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }

}

//页容量跳转
const show = () => {
    can.pageIndex = 1;
    GetDiscount();
}
//分页
const gopage = (num: any) => {
    if (num < 1) {
        can.pageIndex = 1;
        return;
    }
    if (num > data.totalPage) {
        can.pageIndex = data.totalPage;
        return;
    }
    can.pageIndex = num;
    GetDiscount();

}


//获取优惠券列表
const GetDiscount = () => {
    axios({
        method: "get",
        url: "/api/Disc/ShowDiscCount",
        params: can
    })
        .then(res => {
            data.list = res.data.list
            data.totalCount = res.data.totalCount,
                data.totalPage = res.data.totalPage
        })
        .catch(err => {
            console.log(err);
        })
}




</script>



<style scoped>
b {
    color: red;

}

span {
    margin: 0 7px;
}

input {
    margin: 0 5px;
}
</style>